<div class="main-section">
    <h1 class="main-section__title">Progress</h1>

    <p class="main-section__intro">
        <code>lx-progress</code> is a directive that create a circular or a linear progress.
    </p>

    <p class="main-section__warning">
        This component has been completly reworked since LumX beta version (v0.3.96).<br />Please refer to the updated documentation.
    </p>
    
    <lx-component lx-title="Determinate" lx-path="/includes/modules/progress/includes/determinate.html" lx-js-path="/js/progress/demo/demo-progress_controller.js"></lx-component>
    <lx-component lx-title="Indeterminate" lx-path="/includes/modules/progress/includes/indeterminate.html" lx-js-path="/js/progress/demo/demo-progress_controller.js"></lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-color</td>
                    <td><code>string</code></td>
                    <td><code>primary</code></td>
                    <td>Define the progress color. Options: colors defined in colors and sizes section in <code>dist/scss/core/settings/defaults.scss</code></td>
                </tr>
                <tr>
                    <td>lx-diameter</td>
                    <td><code>string</code></td>
                    <td><code>100</code></td>
                    <td>The progress scale defined in percent value. Only available with the circular progress.</td>
                </tr>
                <tr>
                    <td>lx-type*</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Define the progress type. Options: <code>circular</code>, <code>linear</code></td>
                </tr>
                <tr>
                    <td>lx-value</td>
                    <td><code>number</code></td>
                    <td></td>
                    <td>Define the progress value in percentage (0 to 100).</td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>
</div>